<template>
    <div>
        <ul class="order-tab fs14 flex-row ">
            <li class="tab-item flex-1 " v-for="(item,index) in tabList" :class="{'tab-item-active':index==tabActive}"
                @click="choiceTab(index)">
                {{item.title}}
            </li>
        </ul>
        <van-cell-group v-if="!tabActive">
            <van-field type="password" clearable label="旧密码" placeholder="请输入旧密码" clearable v-model="form.pwd"/>
            <van-field type="password" label="新密码" placeholder="请输入新密码" clearable v-model="form.new_pwd"/>
        </van-cell-group>

        <van-cell-group v-if="tabActive">
            <van-field type="password" clearable label="旧二级密码" placeholder="请输入旧二级密码" clearable v-model="form2.pwd2"/>
            <van-field type="password" label="新二级密码" placeholder="请输入新二级密码" clearable v-model="form2.new_pwd"/>
        </van-cell-group>
        <div class="btn-box">
            <van-button class="btn" size="large" @click="updatePassword">{{!tabActive?'修改密码':'修改二级密码'}}</van-button>
        </div>
    </div>
</template>

<script>
    import md5 from "js-md5"
    import {mapGetters} from 'vuex'

    export default {
        name: "Login",
        data() {
            return {
                form: {
                    pwd: '',
                    new_pwd: ''
                },
                form2: {
                    pwd2: '',
                    new_pwd: ''
                },
                tabList: [
                    {title: '修改密码', status: ''},
                    {title: '修改二级密码', status: ''},
                ],
                tabActive: 0
            }
        },
        computed: {
            ...mapGetters(['userInfo']),
        },
        methods: {
            updatePassword() {
                if (!this.tabActive) {
                    if (this.form.pwd == '') return this.fail('旧密码不能为空')
                    if (this.form.new_pwd.length < 6 && this.form.new_pwd.length > 18) return this.fail('请输入6-18位新密码')
                    this.$store.dispatch(types.USER_UPDATE_PASSWORD, {
                        pwd: md5(this.form.pwd),
                        new_pwd: md5(this.form.new_pwd)
                    }).then((res) => {
                        console.log(res)
                        if (res.code !== 0) return this.fail(res.msg)
                        this.success('修改成功')
                        this.$router.push({name: 'home'})
                    })
                } else {
                    if (this.form2.pwd2 == '') return this.fail('旧二级密码不能为空')
                    if (this.form2.new_pwd.length < 6 && this.form2.new_pwd.length > 18) return this.fail('请输入6-18位新二级密码')
                    this.$store.dispatch(types.USER_UPDATE_PASSWORD2, {
                        pwd2: md5(this.form2.pwd2),
                        new_pwd: md5(this.form2.new_pwd)
                    }).then((res) => {
                        console.log(res)
                        if (res.code !== 0) return this.fail(res.msg)
                        this.success('修改成功')
                        this.$router.go(-1)

                    })
                }

            },
            choiceTab(index) {
                if (index == 1 && !this.userInfo.is_setPwd2) return this.fail('请先设置二级密码')
                this.tabActive = index
            }
        }
    }
</script>

<style scoped lang="scss">
    .handle-btns {
        justify-content: flex-end;
        height: 30px;
        span {
            color: #666;
            &:first-child {
                padding-right: 10px;
            }
        }
    }

    .order-tab {
        margin-bottom: 10px;
        .tab-item {
            align-items: center;
            justify-content: center;
            &-active {
                background: $theme-color;
                color: #fff;
            }
        }
    }

</style>